呼~~終於寫完所有躲在瀏覽器後面的東西了，現在我們已經架好了主機、佈好了 API 程式、裝好了 MySQL，就只差前端頁面了。從今天開始，我們就要開始一步一步做出我們的前端 APP。

前端程式必備技能

寫前端程式必須得要對以下幾個語言有基本的掌握度

• HTML – 網頁前端的骨架，勾勒出頁面的基本架構。
• JavaScript – 網頁的腦袋，動態的改變 HTML 內容，並能用程式腳本讓網頁跟使用者可以互動。
• CSS – 網頁的衣服，改變 HTML 外表，讓我們醜醜的原始頁面變漂亮。

如果讀者對於這三個必備技能還不熟悉，筆者非常推薦 W3Schools 的教學，裏頭的教材設計得非常好，即使是張白紙，只要從頭到尾一步一步跟著讀懂、做完，就能對這三個既能有一定程度的掌握。

前端三本柱 – VAR

有別於後端有非常多種語言、框架可以選，前端的世界已經被 JavaScript 統一了，除了一些非常陽春的純 HTML 靜態網頁，幾乎沒有一個網頁不用 JavaScript。就像之前所說的，實際工作之後我們幾乎不會再自幹 library，而是會用框架跟套件，前端當然也是，而前端現在有三個主流框架：Vue, Angular, React。以下簡略說明三個框架的差別，

• Vue – 相對輕巧的框架，較容易入門，中文社群活躍，最近開始有些功能有向 Angular 致敬
• Angular – 最重量級的框架，Google 的親兒子。內建的功能包山包海，想得到的想不到的都有內建支援。但是學習門檻高，需要額外學習 TypeScript。職缺數相較其他兩個框架要少，但是大型網站喜歡用。
• React – 對 DOM 的支援度高，寫出來的 APP 效能好。根據筆者前同事表示，寫起來很自由、開發效率高、感覺像在飛XD

（圖片取自三大框架的 Wiki 頁面）

筆者自己只有用過 Angular，所以關於這三個框架的比較，筆者是根據跟前同事們聊天得來的主觀意見，不代表客觀事實。三大框架的優劣比較一直以來都是網路上的熱門話題，邦友們如果有興趣看看比較，隨便搜尋一下都有優質的比較文章。

框架的選擇與 Day21 的 ORM 選擇一樣，基本上看團隊還有信仰。任一個框架能做的事，其他框架也都做得到。筆者當時因為信仰 Google，加上爬文人家說會後端學 Angular 容易上手，於是就選擇入坑了。筆者的前端技能是自己做菜的一部份，系列文中如果出現錯誤還請大家不吝指教。

Angular 簡介

筆者認為，介紹 Angular 就必須從 Angular 不是 AngularJS 開始！
Angular 不是 AngularJS！
Angular 不是 AngularJS！
Angular 不是 AngularJS！
很重要所以要說三次！

筆者沒有寫過 AngularJS，但是認識的寫過 AngularJS 的同事沒有一個不酸 AngularJS 的，所以即便沒寫過，也不難想像，AngularJS 以前是如何被 React 按在地上磨擦。2016 年 AngularJS 的團隊把 Angular 整個砍掉重練，現在已經是一個成熟又好用的框架，但是沒有接觸 Angular 生態的人，還有很多停留在「Angular(JS) 很爛，最好學 React 或 Vue」的想法，資訊完全沒有更新。

Angular 每半年更新一次主版號，現在已經到了 Angular 12，內容的迭代改進非常之快，整個框架越來越進步、越來越強大。Angular 身為三大框架中最肥大的一個，有以下幾個優點：

• 完整的架構 – Angular 的架構定義嚴謹且設計完善，只要亂寫就編譯不過，只要過得了編譯軟體架構就不會太差，這對於大型網站的開發非常有幫助，有嚴謹的規定就能減少人員素質不一而造成最後專案難以維護。

  不過，像是筆者前一份工作，某外國主管堅持用 jQuery 的思維硬幹寫 "Anygular" 又是另一回事了（苦笑）

• 強大的內建功能 – Angular 內建許多好用、強大的功能，例如路由（routing）、依賴注入（dependency injection）、響應式表單（reactive form）等等，當然也少不了 HttpClient 這類必備的基本功能。
• 妥善的模組化 – 模組（module）與元件（component）的機制，讓我們可以妥善的解藕我們的程式，搭配 DI 注入讓我們程式好開發又好維護
• 使用 TypeScript – Angular 使用強型別的 JavaScript: TypeScript 開發，有效發揮強型別語言的好處，讓我們在開發時期就能發現多數的錯誤，提高開發效率還能減少 bug

  雖然有些大神認為合格的工程師不應該依賴強型別來幫自己偵錯，應該要做什麼事情都在自己掌握之中，不應該犧牲 JavaScript 的自由變成強型別，但筆者認為，除了整個團隊全部都是神，不然以凡人的世界來講，TypeScript 犧牲自由帶來的好處絕對利大於弊。

當然， Angular 也有他的缺點，首先就是入門門檻相對高一些，像是他的架構因為職責拆分得很細而且橫跨很多檔案，沒有 K 文件或者有人帶，自己光看程式碼要搞懂真的有一點難度。其他像是框架太大，寫個小網頁就像用牛刀在殺雞等等。但不管怎樣，做為一個不斷進步的主流框架，筆者覺得 Angular 還是非常值得學習。本系列的最後幾篇，就要來介紹如何用牛刀來殺雞，用 Angular 做一個簡單的前端 APP，我們明天見！